<template>
	<view>
		<u-navbar
			:title="list[activeIndex].title"
			:bg-color="bgColor"
			v-if="activeIndex!==4"
			:fixed="true"
		/>

		<Charge v-show="activeIndex===0" />
		<Mall v-if="activeIndex===1" />
		<!--组件-->
		<GoodPublish
			v-if="activeIndex===2"

			@changeIndex="changeIndex"
		/>
		<InteractMessage
			v-if="activeIndex===3"
		/>
		<MyWorlde v-show="activeIndex===4" />
		<u-tabbar
			:value="
				acktiveIndex"
			@change="name => activeIndex = name"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsgetBottom="true"
		>
			<u-tabbar-item
				v-for="(item,index) in list"
				:key="index"
				:text="item.text"
				:badge="item.badge"
			>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					:style="{'margin-top':item.padding,'width':item.width}"
					:class="[item.width?'active':'u-page__item__slot-icon']"
					:src="[index==activeIndex?item.selectedIconPath:item.iconPath]"
				/>
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					:class="[item.width?'active':'u-page__item__slot-icon']"
					:style="{'margin-top':item.padding,'width':item.width}"
					:src="item.iconPath"
				/>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
import Charge from './Map/index'
import Mall from './Mall/index'
import InteractMessage from './InteractMessage/index.vue'
import MyWorlde from './Myinfor/index'
import GoodPublish from './GoodPublish/index.vue'
import { getmessageList } from '@/api/ChatApi/chat.js'
import { getUserInfo } from '@/store/user.js'
import { getShareAppData } from '@/utils/index'
export default {
  components: {
    Charge,
    Mall,
    InteractMessage,
    MyWorlde,
    GoodPublish
  },
  data() {
    return {
      bgColor: '#ffffff',
      list: [{
        'iconPath': 'https://skillgo.cn/image/image/charge.png',
        'selectedIconPath': 'https://skillgo.cn/image/image/chargeActive.png',
        'text': '元电荷',
        title: '元电荷'
      },
      {
        'iconPath': 'https://skillgo.cn/image/image/mall.png',
        'selectedIconPath': 'https://skillgo.cn/image/image/mallActive.png',
        'text': '商城',
        title: '商城'
      },
      {
        'iconPath': 'https://skillgo.cn/image/image/add.png',
        'selectedIconPath': 'https://skillgo.cn/image/image/add.png',
        'text': '发布',
        title: '发布'
      }, {
        'iconPath': 'https://skillgo.cn/image/image/chat.png',
        'selectedIconPath': 'https://skillgo.cn/image/image/say.png',
        'text': '消息',
        title: '我的消息',
        // badge: '44'
      },
      {
        'iconPath': 'https://skillgo.cn/image/image/my.png',
        'selectedIconPath': 'https://skillgo.cn/image/image/myWorldActive.png',
        'text': '我的',
        title: '个人信息',
      }],
      activeIndex: 4,
      loading: true,

    }
  },
  methods: {
    async changeIndex() {
      this.activeIndex = 1
      setTimeout(function() {
        this.loading = false
      }, 200)
    },
    /**
     * 获取消息列表
     */
    async getMessageList() {

      const res = await getmessageList({ senderId: getUserInfo().id })

      setTimeout(() => {
        this.loading = false
        this.triggered = false
      }, 300)
      this.messageList = res.data
    },
  },
  onShareAppMessage() {
    return getShareAppData(`Charge元电荷邀请你加入`)
  },
  destroyed() {
    console.log('asd', this.inter)
    clearInterval(this.inter)
    this.inter = null
  },
  onUnload() {
    console.log('2')
    if (this.inter) {
      clearInterval(this.inter)
      this.inter = null
    }
  },
  onHide() {
    console.log('3', this.inter)
    if (this.inter) {
      clearInterval(this.inter)
      this.inter = null
    }
  },
}
</script>
<style lang="scss" scoped>
.publicherplus{
  background:#007AFF;
  border-radius: 100%;
  position: fixed;
  z-index: 9999;
  bottom:200rpx;
}
.u-page__item__slot-icon{
  margin-top: 20rpx;
  width: 45rpx;
  height: 45rpx;
}
.active{
  width: 125rpx;
  height: 80rpx;
  background: #fff;padding: 20rpx;
  border-radius: 100%;
}
</style>
